<template>
	<div class="container">
		<global-header :user="testUser"></global-header>
		<column-list :list="testData" v-if="false"></column-list>

		<validate-form @form-submit="onFormSubmit">
			<div class="form-group mb-3">
				<label class="form-label">Email address</label>
				<validate-input :rules="emailRules" v-model="emailValue" type="text" placeholder="请输入邮箱地址" ref="inputRef"></validate-input>
			</div>
			<div class="form-group mb-3">
				<label class="form-label">Password</label>
				<validate-input :rules="passwordRules" v-model="passwordValue" type="password" placeholder="请输入密码"></validate-input>
			</div>
			<!-- 具名插槽 ( v-solt:submit 缩写=> #submit ) -->
			<template #submit>
				<button type="submit" class="btn btn-danger">提交</button>
			</template>
		</validate-form>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import "bootstrap/dist/css/bootstrap.min.css"; // 全局引入bootstrap
import ColumnList, { ColumnProps } from "./components/ColumnList.vue";
import GlobalHeader, { UserProps } from "./components/GlobalHeader.vue";
import ValidateForm from "./components/ValidateForm.vue";
import ValidateInput, { RulesProp } from "./components/ValidateInput.vue";

const testData: ColumnProps[] = [
	{
		id: 1,
		title: "test1专栏",
		avatar: "https://avatar.csdnimg.cn/A/4/9/2_x550392236.jpg",
		description: "这是专栏这是专栏",
	},
	{
		id: 2,
		title: "test2专栏",
		description: "这是专栏这是专栏这是专栏这是专栏这是专栏这是专栏这是专栏",
	},
	{
		id: 3,
		title: "test3专栏",
		avatar: "https://avatar.csdnimg.cn/A/4/9/2_x550392236.jpg",
		description: "这是专栏这是专栏",
	},
	{
		id: 4,
		title: "test4专栏",
		avatar: "https://avatar.csdnimg.cn/A/4/9/2_x550392236.jpg",
		description:
			"这是专栏这是专栏这是专栏这是专栏这是专栏这是专栏这是专栏这是专栏",
	},
];
const testUser: UserProps = {
	isLogin: true,
	name: "xia",
};
export default defineComponent({
	name: "App",
	components: { ColumnList, GlobalHeader, ValidateForm, ValidateInput },
	setup() {
		const emailValue = ref("");
		const emailRules: RulesProp = [
			{ type: "required", message: "不能为空" },
			{ type: "email", message: "格式不正确" },
		];
		const passwordValue = ref("");
		const passwordRules: RulesProp = [
			{ type: "required", message: "不能为空" },
		];
		const inputRef = ref<any>();
		const onFormSubmit = (res: boolean) => {
			// 调用子组件中的方法 相当于 this.$refs.inputRef.validDateInput()
			// console.log(inputRef.value.validDateInput());
			console.log("onFormSubmit", res);
		};
		return {
			testData,
			testUser,
			emailRules,
			emailValue,
			passwordRules,
			passwordValue,
			onFormSubmit,
			inputRef,
		};
	},
});
</script>

<style>
</style>
